<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Frame Embed Page</title>
        
        <!-- The stylesheet -->
        <link href="{{bootstrap_css}}" rel="stylesheet">
        <link href="{{framewarp_css}}" rel="stylesheet">
        <link href="{{utils_css}}" rel="stylesheet">
        <link href="{{cloud_css}}" rel="stylesheet">
        <style>

        h1{
            text-align:center;
            margin-top:200px;
            font-weight:normal;
        }

        #close{
            display:block;
            width:100px;
            margin:20px auto;
            text-align:center;
        }
        </style>

        <!--[if lt IE 9]>
          <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    
    <body class="framePage">

        <div id="wordcloud" style="width: 600px; height: 400px; position: relative;"></div>

        <!--<button type="button" class="btn btn-info" style:"width: 400px; position: relative;" onclick="hide_frame();">Close Window</button>-->
        <script src="{{jquery_js}}"></script>
        <script src="{{bootstrap_js}}"></script>
        <script src="{{japp_js}}"></script>
        <script src="{{utils_js}}"></script>
        <script src="{{framewarp_js}}"></script>
        <script src="{{cloud_js}}"></script>
        <script>
        var word_list = [
        {% for t in tags %}
            {text: "{{t.text}}", weight: {{t.weight}}, html: {"class" : "i{{t.priority}}", "onClick":"jumpToTag({{cat_id}}, '{{t.text}}')"}},
        {% endfor %}
        ];
        $(document).ready(function() {
            $("#wordcloud").jQCloud(word_list);
            word_list = [
                {% for t in tags %}
                    {text: "{{t.text}}", weight: {{t.weight}}, html: {"class" : "i{{t.priority}}", "onClick":"hide_frame();"}},
                {% endfor %}
            ];
        });
        function jumpToTag(cat_id, tag){
            hide_frame();
            var cur = parent.document.getElementById('main_frame').src;
            var end = cur.indexOf('?');
            if (end == -1){
                end = cur.length;
            }
            var page = cur.substring(0, end);
            parent.document.getElementById('main_frame').src = page + "?cat_id=" + cat_id + "&tag=" + tag;
        }
        </script>
    </body>
</html>